<script setup>
import { useCarStore } from "@/stores/cart.js";
const props = defineProps(["shopData", "shopName"]);
const cart = useCarStore();
//增加操作
const addProduct = (product) => {
  product.number++;
  let res = cart.cartList.find((item) => {
    return item.name == props.shopName;
  });
  if (!res) {
    let  carList = { name: "", list: [] };
    carList.name = props.shopName;
    carList.list.push(product);
    // console.log(carList);
    cart.cartList.push(carList);
  } else {
    //有该商店的购物车，查询是否有该对象    有：不执行操作 无：添加上该对象
    let res2 = res.list.find((item) => item == product);
    // console.log(res2);
    if (!res2) {
      res.list.push(product);
    }
  }
  // product.number++
  //   let res = cart.cartList.find(item => item.name == props.shopName)
  //   if (!res) {
  //       let shopCart = { name: '', list: [] }
  //       shopCart.name = props.shopName
  //       shopCart.list.push(product)
  //       cart.cartList.push(shopCart)
  //   } else {
  //       let res2 = res.list.find(item => item == product)
  //       if (!res2) {
  //           res.list.push(product)
  //       }
  //   }
};
// 减少操作
const deleteProduct = (product) => {
    if(product.number > 0) {
        product.number--
    }
    // 在购物车列表中查找当前店铺购物车
    let res = cart.cartList.find(item => item.name == props.shopName)
    if(!res) return
    if(product.number == 0) {
         res.list = res.list.filter(item => item !== product)
    }
    // if (props.shopData.number <= 0) return
    // product.number--
    // let res = cart.cartList.find(item => item.name == props.shopName)
    // if (!res) return
    // if (product.number == 0) {
    //     res.list = res.list.filter(item => item != product)
    // }

};
</script>

<template>
  <div class="product">
    <div class="product_img">
      <!-- <div class="product_img--min"> -->
      <img
        :src="`http://www.dell-lee.com/imgs/vue3/${props.shopData.imgName}.png`"
        alt=""
      />
    </div>
    <div class="product_content">
      <div class="product_content_title">{{ props.shopData.title }}</div>
      <!-- <div class="product_content_sales">月售 {{ props.product.sales }} 件</div> -->
      <slot></slot>
      <div class="product_content_price">
        ￥{{ props.shopData.price }}
        <span class="product_content_old_price"
          >￥{{ props.shopData.oldPrice }}</span
        >
      </div>
    </div>
    <div class="product_number">
      <span class="product_number_minus" @click="deleteProduct(props.shopData)"
        >-</span
      >
      {{ props.shopData.number }}
      <span class="product_number_plus" @click="addProduct(props.shopData)"
        >+</span
      >
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";
.product {
  padding: 0.18rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: 0.01rem solid $content-bgColor;

  &_img {
    width: 0.68rem;
    margin-right: 0.18rem;

    img {
      width: 0.68rem;
      height: 0.68rem;
    }
  }
  &_img--min {
    width: 0.48rem;
    margin-right: 0.18rem;

    img {
      width: 0.48rem;
      height: 0.48rem;
    }
  }
  &_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      font-size: 0.14rem;
      font-weight: bold;
      color: $content_fontcolor;
      @include ellipse;
    }
    &_price {
      color: $hightlight-fontColor;
    }
    &_old_price {
      color: $light-fontColor;
      text-decoration: line-through;
    }
  }
  &_number {
    position: absolute;
    right: 0.18rem;
    bottom: 0.18rem;

    &_minus,
    &_plus {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      font-size: 0.16rem;
      text-align: center;
    }
    &_minus {
      border: 0.01rem solid $medium-fontColor;
      color: $medium-fontColor;
      margin-right: 0.08rem;
    }
    &_plus {
      background-color: $btn-bgColor;
      color: $bgColor;
      margin-left: 0.08rem;
    }
  }
}
</style>